<template>
	<view class="container">
		<uwo-nav-bar bgColor="#2979ff">
			<template #content>字体大小</template>
		</uwo-nav-bar>

		<view
			class="bg-body uni-pa-8 preview flex align-center justify-center flex-direction"
			:style="{
				fontSize: activeKey + 'px'
			}"
		>
			<view class="">人生得意须尽欢，莫使金樽空对月。</view>
			<view class="">天生我材必有用，千金散尽还复来。</view>
		</view>
		<view class="uni-pa-10">
			<view class="">字体大小</view>
			<view class="uni-mt-16 sync-size flex justify-between align-center">
				<view class="vertical" v-for="item in fontArray" :key="item" @click="handleSelect(item)" :class="item === activeKey ? 'active' : ''"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const fontArray = ref([14, 16, 18, 20, 24, 28]);
const activeKey = ref(16);
const handleSelect = (item) => {
	activeKey.value = item;
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	overflow: hidden;
	background-color: #ffffff;
	.preview {
		height: 70vh;
	}
	.sync-size {
		position: relative;
		&::after {
			content: '';
			position: absolute;
			top: 10px;
			left: 0;
			right: 0;
			height: 2px;
			background-color: $uni-base-color;
		}
		.vertical {
			position: relative;
			&:first-child::before {
				content: 'A';
				font-size: 14px;
				position: absolute;
				top: -20px;
			}
			&:last-child::before {
				content: 'A';
				font-size: 28px;
				position: absolute;
				top: -30px;
				left: -10px;
			}
			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 20px;
				background-color: $uni-base-color;
			}
			&.active {
				&::after {
					content: '';
					position: absolute;
					left: -10px;
					width: 20px;
					height: 20px;
					border-radius: 20px;
					z-index: 100;
					background-color: #f7f7f7;
					box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.8);
				}
			}
		}
	}
}
</style>
